<template>
  <!-- 发起采购 -->
  <div class="procurement">
    <div class="g-con">
      <!-- <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">
            {{ t('home') }}
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">
            {{ t('header.menu1') }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            {{ t('procurement.InitiateProcurement') }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div> -->

      <div
        class="number flexcc-col"
        v-if="store.activeStep !== 0"
      >
        <div class="tit">
          {{ t('procurement.orderNumber') }}：{{ store.orderInfo.orderNo }} <template v-if="store.orderInfo.procureOrderName && store.activeStep !== 1">{{ store.orderInfo.procureOrderName }}</template>
        </div>
        <div
          class="name mt-3"
          v-if="store.activeStep === 1"
        >
          <el-input
            v-model="store.orderInfo._procureOrderName"
            maxlength="20"
            :placeholder="t('procurement.orderNname')"
            style="width: 320px"
          ></el-input>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="g-con">
        <!-- <div class="step">
          <div
            :class="['bold', 'item', 'flexcc', { active: index === store.activeStep }]"
            v-for="(item, index) in store.steplist"
            :key="index"
          >
            <span>{{ t(`procurement.${item.label}`) }}:</span>
            <span>{{ t(`procurement.${item.desc}`) }}</span>
          </div>
        </div> -->
        <!--  -->
        <step1 v-if="store.activeStep === 0" />
        <step2 v-if="store.activeStep === 1" />
        <step3 v-show="store.activeStep === 2" />
        <step4 v-if="store.activeStep === 3" />
        <!--  -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useProcurement from '@/stores/procurement.js'

import step1 from './Step1.vue'
import step2 from './Step2.vue'
import step3 from './Step3.vue'
import step4 from './Step4.vue'

const router = useRouter()
const route = useRoute()

watch(route, (n) => {
  reset()
})

const { t, locale } = useI18n()

watch(locale, (n) => {})

const store = useProcurement()
const { next, back, reset } = store
</script>

<style scoped lang="scss">
.procurement {
  margin-bottom: -76px;

  .breadcrumb {
    padding: 30px 0;
    border-bottom: 2px solid #eaebec;
  }

  .number {
    padding: 30px;
    font-weight: bold;
    .tit {
      font-size: 20px;
    }
  }

  .main {
    background: #f5f5f5;
    padding: 50px 0 0;

    .step {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 60px;
      height: 60px;
      padding: 10px;
      background: #252628;
      border-radius: 30px;
      color: #fff;
      .item {
        position: relative;
        &.active {
          background: var(--mainColor);
          border-radius: 30px;
        }
        &:not(:last-of-type)::after {
          content: '';
          display: block;
          width: 30px;
          height: 0px;
          border-bottom: 2px dashed #a3a5a9;
          position: absolute;
          top: 50%;
          left: calc(100% + 15px);
        }
      }
    }

    :deep(.bold) {
      span {
        font-weight: bold;
        line-height: 1;
        font-size: 18px;
        &:nth-of-type(1) {
          margin-right: 5px;
        }
        &:nth-of-type(2) {
          // font-size: 12px;
        }
      }
    }
  }
}
</style>
